<template>
	<!-- <view>   登录页面</view> -->
	<view>
		
		
		<view  class=" d-flex a-center j-sb py-2 px-2">
			<view  class="iconfont icon-shanchu1" @click="goBack"> </view>
			<view  class="font-md" @click="forget">忘记密码</view>
			
		</view>
		
		<view class="p-5">
			<view  class="font-weight   font-big  mb-5 ">密码登录</view>
			
			<input type="text"  placeholder="请输入用户名"   class="border-bottom   mb-4   uni-input  px-0 " 
			placeholder-class="text-light-muted"
			v-model="username"
			@focus="focus('username')"
			@blur="blur('username')"
			:class="focusClass.username? 'main-text-color' : '' "
			/>
			<input type="text"   placeholder="请输入密码"     class="border-bottom   mb-4   uni-input  px-0 " 
			placeholder-class="text-light-muted"
				v-model="password"
				
				
				@focus="focus('password')"
				@blur="blur('password')"
				:class="focusClass.password? 'main-text-color' : '' "
			/>
			<label for=""   @click="check = !check">
				<checkbox :checked="check"  />
				<text  class="text-light-muted font">已经阅读xxx协议</text>
				
			</label>
			<view  class="main-bg-color  text-white w-100 h-50   py-2 my-2   rounded font-md mb-4   d-flex a-center  j-center"
			hover-class="main-bg-hover-color"
			
			@click="submit"
			>登录</view>
			
		</view>
		
	</view>
	
</template>


<script>       
  
	 import {loignPath} from '@/common/lib/loginUrl.js' 
	 
	 import  {mapMutations} from 'vuex'
	 export default  {
		 
		 data() {
			 
			 return {
				 check:true,
				 username:'user2',
				 password:'zcmcss',
				 
				 
				 focusClass:{
					 username:false,
					 password:false
				 },
				 
				 
				 rules:{
					 username:[
						 {
							rule: /^[a-zA-Z]\w{3,17}$/,
							msg: "账号必须字母开头，长度在6~18之间，只能包含字母、数字和下划线"
						 }
					 ],
					 
					 password:[
						 {
							 rule: /^.{5,20}$/,
							 msg: "密码长度必须为5-20个字符"
						 }
					 ]
					 
					 
				 }
				 
				 
			 }
		 },
		 	
			
			
			methods:{
				...mapMutations(['login']),
				
				
				goBack(){},
				
			forget(){},
			
			
			//获取焦点高亮
			focus(key) {
				this.focusClass[key]=true
				
				
			},
			//失去焦点还原
			blur(key) {
				this.focusClass[key]=false
			},
			
				// 表单验证
			validate(key) {
				let checks=true  //表示验证通过
				
				
				this.rules[key].forEach(v=>{
					
					if(!(v.rule).test(this[key])){
						uni.showToast({
							title:v.msg,
							icon:'none'
						})
						
						 checks=false
						return  checks 
						
					}
					
				})
				
				return  checks
			
					
				},
				
				 submit() {
					// let flag= this.validate('username');
					// console.log(flag)
					//首先验证 协议是否选中 
					
					console.log(this.check)
					if(!this.check) {
						uni.showToast({
							icon:'none',
							title:"请先选择xxx协议"
						})
						return 
						
					}
					
					 let flagName=this.validate('username');
					 if(!flagName) return 
					
					let  flagPwd=this.validate('password')
					if(!flagPwd) return 
					
					
					uni.showLoading({
						title:'正在登录...'
					})
					this.$api.post({url:loignPath,data:{
						username:this.username,
						password:this.password
						
					}}).then(res=>{
						
						uni.hideLoading()
						uni.showToast({
							title:'登录成功',
							icon:'none',
							duration:2000,
							success:()=>{
								uni.navigateBack({
									delta:1
								})
							}
						})
					
						
						console.log('登录')
						console.log(res.data)
						//调用mutations里面的方法 把登录后的数据存储到vuex 里面去
						this.login(res.data)
						
					})
					 
				 }   
			
				
				
				
				
				
			}
			
			
			
			
			}
				 
				 
	
</script>

<style>
		
</style>